<template>
  <div class="operation-box">
    <div class="left">
      <div class="operation-info">
        <div class="operation-content">
          <div class="pat-info">
            <img src="@/assets/home/avtar.png" alt="" class="avtar" />
            <span>{{ filteredData?.patientName }}</span>
            <span>{{ filteredData?.patientAge }}岁</span>
            <span>{{ filteredData?.gender == "1" ? "男" : "女" }}</span>
            <span
              >会诊类别：{{
                PatientInformation?.patientInforList?.hzType
              }}</span
            >
          </div>
          <div>
            <span
              >会诊申请时间：{{
                PatientInformation?.patientInforList?.sqtime
              }}</span
            >
          </div>
          <div>
            <span style="margin-right: 25px"
              >申请方：{{
                PatientInformation?.patientInforList?.specialistIdFromName
              }}</span
            >
            <span
              >受邀方：{{
                PatientInformation?.patientInforList?.specialistIdToName
              }}</span
            >
          </div>
          <div>
            <span style="margin-right: 15px"
              >既往史：{{ filteredData?.history }}</span
            >
            <span>过敏项：{{ filteredData?.allergen }}</span>
          </div>
          <div>
            <span>诊断：{{ filteredData?.diagnosis }}</span>
          </div>
          <div>
            <span>体征：{{ filteredData?.physicalData }}</span>
          </div>
          <div>
            <div style="margin-right: 53px; margin-bottom: 0">
              <svg-icon
                name="anaesthesia"
                style="width: 28px; height: 28px; margin-right: 11px"
              />
              <span>{{ filteredData?.nurse }}</span>
            </div>
            <div>
              <svg-icon
                name="operation"
                style="width: 28px; height: 28px; margin-right: 11px"
              />
              <span>{{ filteredData?.doctor }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="human-monitoring">
        <sub-title name="体征数据" icon-name="monitoring" has-icon />
        <human-monitor />
      </div>
    </div>

    <div class="center" ref="enabledElement" v-if="hidden">
      <!-- <monitor-Center /> -->
       <div class="pattag">
        <div class="InstituionName">检查机构：{{patmsg?.InstituionName}}</div>
        <div class="datatime">拍摄日期：{{patmsg?.datatime}}</div>
        <div class="modality">检查类型：{{patmsg?.modality}}</div>
      <div class="patname">姓名：{{patmsg?.patientName}}</div>
      <div class="patage">年龄：{{patmsg?.patientsAge}}</div>
      <div class="patsex">性别：{{patmsg?.patientSex=="M"?"男":"女"}}</div>
      <!-- <div>WW:{{patmsg?.WW}}</div> -->
      <!-- <div>WC:{{patmsg?.WC}}</div> -->
    </div>
    </div>
   
    <div class="container" v-if="!hidden">
      <div class="left">
        <div class="axial" ref="axial">
          <div class="overlay-info">轴状面</div>
        </div>
      </div>
      <div class="right">
        <div class="sagittal" ref="sagittal">
          <div class="overlay-info">冠状面</div>
        </div>
        <div class="coronal" ref="coronal">
          <div class="overlay-info">矢状面</div>
        </div>
      </div>
    </div>

    <div class="right">
      <div class="operate">
        <el-scrollbar>
          <sub-title name="影像工具" icon-name="Vector2" />
          <div class="operate-content">
            <ul>
              <li
                v-for="(item, index) in operateList"
                :key="index"
                @click="onTools(item, index)"
                :class="{ active: btnActive === index }"
              >
                <div>
                  <svg-icon
                    :name="item.svg"
                    style="width: 30px; height: 30px"
                  />
                </div>
                <span>{{ item.title }}</span>
              </li>
            </ul>
          </div>
        </el-scrollbar>
      </div>
      <div class="output">
        <sub-title name="诊断" icon-name="Vector4" />
        <el-input
          v-model="textarea"
          :rows="4"
          type="textarea"
          placeholder="请填写诊断"
        />

        <div class="submit" @click="onSubmit">提交</div>
      </div>
      <div class="xiaolan">
        <AI />
      </div>
    </div>
  </div>
</template>

<script setup>
import subTitle from "@/components/Title/subtTitle.vue";
import AI from "@/components/AI/AI.vue";
import stepBar from "@/components/StepBar/StepBar.vue";
import humanMonitor from "./comps/humanMonitor.vue";
import monitorCenter from "./comps/monitorCenter.vue";
import html2canvas from "html2canvas";
import { nextTick, onMounted, reactive } from "vue";
import usePatientInformation from "@/store/usePatientInformation.js";
const PatientInformation = usePatientInformation();
import { getFileList, updateMsg, getAllPat } from "../../api/index.js";
import * as cornerstone from "cornerstone-core";
import cornerstoneMath from "cornerstone-math";
import * as cornerstoneTools from "cornerstone-tools";
import cornerstoneSideImageLoader from "cornerstone-side-image-loader";
import cornerstoneWADOImageLoader from "cornerstone-wado-image-loader";
import dicomParser from "dicom-parser";
cornerstoneTools.external.cornerstone = cornerstone;
cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
cornerstoneWADOImageLoader.webWorkerManager.initialize({
  maxWebWorkers: navigator.hardwareConcurrency || 1,
  startWebWorkersOnDemand: true,
  taskConfiguration: {
    decodeTask: {
      initializeCodecsOnStartup: false,
    },
  },
  webWorkerTaskPaths: [
    "https://unpkg.com/cornerstone-wado-image-loader@4.1.5/dist/610.bundle.min.worker.js",
  ],
});
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
cornerstoneSideImageLoader.external.cornerstone = cornerstone;
const axial = ref(null);
const sagittal = ref(null);
const coronal = ref(null);
// 创建同步器
const updateImageSynchronizer = new cornerstoneTools.Synchronizer(
  "cornerstonenewimage",
  cornerstoneTools.updateImageSynchronizer
);

const { generateSideImages } = cornerstoneSideImageLoader;
// mpr视图逻辑
// async function render(element, imageIds) {
//   cornerstone.enable(element);
//   const image = await cornerstone.loadAndCacheImage(imageIds[0]);
//   cornerstone.displayImage(element, image);
//   cornerstoneTools.addStackStateManager(element, ["stack", "Crosshairs"]);
//   const stack = {
//     currentImageIdIndex: 0,
//     imageIds,
//   };
//   cornerstoneTools.addToolState(element, "stack", stack);
//   const StackScrollMouseWheelTool =
//     cornerstoneTools["StackScrollMouseWheelTool"];
//   const CrosshairsTool = cornerstoneTools["CrosshairsTool"];
//   const OrientationMarkersTool = cornerstoneTools["OrientationMarkersTool"];
//   cornerstoneTools.addToolForElement(element, StackScrollMouseWheelTool);
//   cornerstoneTools.addToolForElement(element, CrosshairsTool);
//   cornerstoneTools.addToolForElement(element, OrientationMarkersTool);
//   updateImageSynchronizer.add(element);
//   cornerstoneTools.setToolActiveForElement(element, "StackScrollMouseWheel", {
//     mouseButtonMask: 0,
//   });
//   cornerstoneTools.setToolActiveForElement(element, "Crosshairs", {
//     mouseButtonMask: 1,
//     synchronizationContext: updateImageSynchronizer,
//   });
//   cornerstoneTools.setToolActiveForElement(element, "OrientationMarkers");
//   return Promise.all(
//     imageIds.map((imageId) => cornerstone.loadAndCacheImage(imageId))
//   );
// }
// async function init() {
//   const images = await render(axial.value, imageIds);
//   console.log(axial.value);
//   const { coronalImageIds, sagittalImageIds } = generateSideImages(images);
//   await render(coronal.value, coronalImageIds);
//   await render(sagittal.value, sagittalImageIds);
//   console.log(imageIds);
// }

// 初始化工具库
cornerstoneTools.init({
  showSVGCursors: true,
  touchEnabled: false,
});

const hidden = ref(true);

const videoElement = ref(null);
const recorder = ref(null);
const chunks = ref([]);
const isRecording = ref(false);
const viewflag = ref(true); // 二维三维视图切换

const textarea = ref("");
const flag = ref(true);
const uploadResult = ref(""); // 上传截图的结果
// 工具操作

// 工具状态选中状态
const btnActive = ref(null);
const enabledElement = ref(null);
const imageIndex = ref(0);
const imageIds = reactive([]);

// 工具点击
const onTools = (item, index) => {
  btnActive.value = index;
  operateList[index].event();
};
const list = reactive({
  type: "dicom",
  patId: PatientInformation.patientInforList.patId,
});

const operateList = reactive([
  {
    svg: "moveTool",
    title: "移动",
    event: () => {
      cornerstoneTools.addTool(cornerstoneTools.PanTool);
      cornerstoneTools.setToolActive("Pan", { mouseButtonMask: 1 });
    },
  },
  {
    svg: "rolTool",
    title: "调窗",
    event: () => {
      cornerstoneTools.addTool(cornerstoneTools.WwwcTool);
      cornerstoneTools.setToolActive("Wwwc", { mouseButtonMask: 1 });
      cornerstoneTools.clearToolState(enabledElement.value, null);
    },
  },
  {
    svg: "reverseColourTool",
    title: "反片",
    event: () => {
      const viewport = cornerstone.getViewport(enabledElement.value);
      viewport.invert = !viewport.invert;
      cornerstone.setViewport(enabledElement.value, viewport);
    },
  },
  {
    svg: "ellipseTool",
    title: "椭圆",
    event: () => {
      cornerstoneTools.addTool(cornerstoneTools.EllipticalRoiTool);
      cornerstoneTools.setToolActive("EllipticalRoi", { mouseButtonMask: 1 });
    },
  },
  {
    svg: "rectangleTool",
    title: "矩形",
    event: () => {
      cornerstoneTools.addTool(cornerstoneTools.RectangleRoiTool);
      cornerstoneTools.setToolActive("RectangleRoi", { mouseButtonMask: 1 });
    },
  },
  // {
  //   svg: "",
  //   title: "mpr",
  //   event: async () => {
  //     hidden.value = false;
  //     nextTick(() => {
  //       init();
  //     });
  //   },
  // },

  // {
  //   svg: "",
  //   title: "返回",
  //   event: async () => {
  //     hidden.value = true;
  //     imageIds.length = 0;
  //     const item = await getFileList(list);
  //     item.forEach((res) => {
  //       imageIds.push(`dicomweb:${res}`);
  //     });
  //     cornerstone.enable(enabledElement.value);
  //     loadImage();
  //   },
  // },

  {
    svg: "lensTools",
    title: "透镜",
    event: () => {
      cornerstoneTools.removeTool("Magnify");
      let MagnifyTool = cornerstoneTools.MagnifyTool;
      cornerstoneTools.addTool(MagnifyTool, {
        configuration: {
          magnifySize: 200,
          magnificationLevel: 2,
        },
      });
      cornerstoneTools.setToolActive("Magnify", {
        mouseButtonMask: 1,
      });
      cornerstoneTools.addTool(cornerstoneTools.HuTool);
      cornerstoneTools.setToolActive("Hu", { mouseButtonMask: 1 });
    },
  },
  {
    svg: "xuanzhuanTool",
    title: "旋转",
    event: () => {
      const RotateTool = cornerstoneTools.RotateTool;
      cornerstoneTools.addTool(RotateTool, {
        configuration: {
          // 是否采用整数的角度，自动取整
          roundAngles: false,
          // 水平方向翻转角度
          flipHorizontal: false,
          // 垂直方向翻转角度
          flipVertical: false,
          // 角度的步长，此项调整旋转的鼠标的控制力度
          rotateScale: 1,
        },
      });
      cornerstoneTools.setToolActive("Rotate", {
        mouseButtonMask: 1,
      });
    },
  },
  {
    svg: "suofangTool",
    title: "缩放",
    event: () => {
      cornerstoneTools.addTool(cornerstoneTools.ZoomTool);
      cornerstoneTools.setToolActive("Zoom", { mouseButtonMask: 1 });
    },
  },

  // { svg: "arrows", title: "箭头",event:()=>{
  // const ArrowAnnotateTool = cornerstoneTools.ArrowAnnotateTool
  // cornerstoneTools.addTool(ArrowAnnotateTool)
  // cornerstoneTools.setToolActive("ArrowAnnotate",{
  //   mouseButtonMask:1,
  //   configuration:{
  //     getTextCallback:(callback)=>{
  //       const text = prompt("请输入标注内容",'')
  //       callback(text)
  //     },
  //     doneChangingTextCallback:props.doneChangingTextCallback
  //   }
  // })
  // } },
  {
    svg: "Vector4",
    title: "播放",
    event: () => {
      if (flag.value) {
        flag.value = false;
        cornerstoneTools.playClip(enabledElement.value, imageIds, {
          frameRate: 30,
          direction: 1,
          startFrameIndex: 0,
        });
        cornerstoneTools.playClip(sagittal.value, imageIds, {
          frameRate: 30,
          direction: 1,
          startFrameIndex: 0,
        });
        cornerstoneTools.playClip(coronal.value, imageIds, {
          frameRate: 30,
          direction: 1,
          startFrameIndex: 0,
        });
      } else if ((flag.value = true)) {
        cornerstoneTools.stopClip(enabledElement.value);
        cornerstoneTools.stopClip(sagittal.value);
        cornerstoneTools.stopClip(coronal.value);
        flag.value = true;
      }
    },
  },
  {
    svg: "lineTool",
    title: "直线",
    event: () => {
      cornerstoneTools.addTool(cornerstoneTools.LengthTool);
      cornerstoneTools.setToolActive("Length", { mouseButtonMask: 1 }); // 激活直尺测量工具
    },
  },
  // { svg: "gouhuaTool", title: "勾画" },
  {
    svg: "jiaoduTool",
    title: "角度",
    event: () => {
      cornerstoneTools.addTool(cornerstoneTools.AngleTool);
      cornerstoneTools.setToolActive("Angle", { mouseButtonMask: 1 });
    },
  },
  // { svg: "yuanxinTool", title: "圆心" },
  {
    svg: "tanzhenTool",
    title: "探针",
    event: () => {
      const DragProbeTool = cornerstoneTools.DragProbeTool;
      cornerstoneTools.addTool(DragProbeTool, {
        configuration: {
          minimal: true,
        },
      });
      cornerstoneTools.setToolActive("DragProbe", {
        mouseButtonMask: 1,
      });
      const ActiveScissorTool = cornerstoneTools.getToolForElement(
        enabledElement.value,
        "DragProbe"
      ); //element元素  toolName 工具名(不带Tool)

      ActiveScissorTool.setActiveStrategy("minimal"); //这个状态下不会显示移动坐标
    },
  },

  {
    svg: "chongzhiTool",
    title: "重置",
    event: () => {
      console.log(cornerstone, "22222");
      cornerstoneTools.clearToolState(enabledElement.value, "Length");
      cornerstoneTools.clearToolState(enabledElement.value, "Angle");
      cornerstoneTools.clearToolState(enabledElement.value, "FreehandRoi");
      cornerstoneTools.clearToolState(enabledElement.value, "Zoom");
      cornerstoneTools.clearToolState(enabledElement.value, "Pan");
      cornerstoneTools.clearToolState(enabledElement.value, "DragProbe");
      cornerstoneTools.clearToolState(enabledElement.value, "RectangleRoi");
      cornerstoneTools.clearToolState(enabledElement.value, "EllipticalRoi");
      cornerstoneTools.clearToolState(
        enabledElement.value,
        "FreehandScissorsThresholdSegmentation"
      );
      cornerstoneTools.clearToolState(enabledElement.value, "Wwwc");
      cornerstoneTools.clearToolState(enabledElement.value, "Rotate");
      cornerstoneTools.removeTool("Length");
      cornerstoneTools.removeTool("Angle");
      cornerstoneTools.removeTool("FreehandRoi");
      cornerstoneTools.removeTool("Zoom");
      cornerstoneTools.removeTool("FreehandScissorsThresholdSegmentation");
      cornerstoneTools.removeTool("DragProbe");
      cornerstoneTools.removeTool("RectangleRoi");
      cornerstoneTools.removeTool("EllipticalRoi");
      cornerstoneTools.removeTool("Wwwc");
      cornerstoneTools.removeTool("Rotate");
      cornerstoneTools.removeTool("Pan");
      cornerstone.reset(enabledElement.value);
      cornerstone.updateImage(enabledElement.value);
      console.log(cornerstoneTools, "工具");
    },
  },
  // {
  //   svg: "jietuTool",
  //   title: "截屏",
  //   event: async () => {
  //     if (enabledElement.value) {
  //       try {
  //         // 使用 html2canvas 截图
  //         const canvas = await html2canvas(enabledElement.value);
  //         // 将 canvas 转换为 Blob 对象
  //         canvas.toBlob(async (blob) => {
  //           if (blob) {
  //             // 创建 FormData 对象
  //             const formData = new FormData();
  //             formData.append("file", blob, "screenshot.png"); // 'file' 是后端接收文件的字段名

  //             // 上传到服务器
  //             const response = await axios.post(
  //               "https://your-server-url/upload",
  //               formData,
  //               {
  //                 headers: {
  //                   "Content-Type": "multipart/form-data", // 设置请求头
  //                 },
  //               }
  //             );

  //             // 显示上传结果
  //             uploadResult.value = `File uploaded successfully: ${response.data.url}`;
  //           } else {
  //             uploadResult.value = "Failed to convert canvas to Blob.";
  //           }
  //         }, "image/png"); // 指定图片格式为 PNG
  //       } catch (error) {
  //         console.error("Error capturing or uploading screenshot:", error);
  //         uploadResult.value = "Error uploading file.";
  //       }
  //     }
  //   },
  // },
  // {},
]);
// 添加功能
function initTool() {
  const StackScrollMouseWheelTool = cornerstoneTools.StackScrollMouseWheelTool;
  const props = {
    configuration: {
      // 是否在序列内循环
      loop: true,
      // 是否跳帧
      allowSkipping: true,
      // 倒转方向
      invert: false,
    },
  };
  cornerstoneTools.addTool(StackScrollMouseWheelTool, props);
  cornerstoneTools.setToolActive("StackScrollMouseWheel", {
    mouseButtonMask: 0,
  });
}

const getImageInfoByDataSet = (dataSet) => {
  const imageInfo = {
    patientName: dataSet.string("x00100010"),
    patientsAge: dataSet.string("x00101010"),
    patientSex: dataSet.string("x00100040"),
    InstituionName:dataSet.string("x00080080"),
    datatime:dataSet.string("x00080023"),
    modality:dataSet.string("x00080060"),
    physician:dataSet.string("X00101003"),
    WC:dataSet.string("x00281050"),
    WW:dataSet.string("x00281051")
  };
  return imageInfo;
};

const patmsg = ref()
// 加载影像
const loadImage = async () => {
  const image = await cornerstone.loadImage(imageIds[imageIndex.value]);
  cornerstoneTools.addStackStateManager(enabledElement.value, ["stack"]);
  const stack = {
    currentImageIdIndex: 0,
    imageIds,
  };
  // dicom影像显示十字线
  const CrosshairsTool = cornerstoneTools["CrosshairsTool"];
  cornerstoneTools.addToolForElement(enabledElement.value, CrosshairsTool);
  cornerstoneTools.setToolActiveForElement(enabledElement.value, "Crosshairs", {
    mouseButtonMask: 1,
  });
  // 为启用元素添加 stack 工具状态
  cornerstoneTools.addToolState(enabledElement.value, "stack", stack);
  cornerstone.displayImage(enabledElement.value, image);
  // const images = await render(axial.value, imageIds);
  // const { coronalImageIds, sagittalImageIds } = generateSideImages(images);
  // console.log(
  //   coronalImageIds,
  //   "coronalImageIds",
  //   sagittalImageIds,
  //   "sagittalImageIds"
  // );
  // await render(coronal.value, coronalImageIds);
  // await render(sagittal.value, sagittalImageIds);
  enabledElement.value.addEventListener("cornerstoneimagerendered", (e) => {
    console.log(e);
    console.log(e, "猫猫阿门妈妈哦哦啊");
    const imageTag = e.detail.image;
    const imageInfo = getImageInfoByDataSet(imageTag.data);
    console.log(imageTag, "2222222222222");
    console.log(imageInfo, "eeeeeeeeeeeee");
    patmsg.value = imageInfo
  });
  initTool();
};

// 提交诊断结果
const onSubmit = () => {
  updateMsg({
    id: PatientInformation.patientInforList.id,
    result: textarea.value,
  }).then((res) => {
    console.log(res, "3333333333666666666");
  });
};

// 加載
const filteredData = ref(null); // 存储筛选结果的响应式变量

onMounted(async () => {
  const item = await getFileList(list);
  const data = await getAllPat();
  filteredData.value = data.find(
    (item) => item.patientId == PatientInformation.patientInforList.patId
  );
  console.log(filteredData.value, "filteredDatafilteredDatafilteredData");

  cornerstone.enable(enabledElement.value);
  item.forEach((res) => {
    imageIds.push(`dicomweb:${res}`);
  });
  loadImage();
});
</script>
<style scoped lang="scss">
@mixin bg() {
  padding: 15px;
  border-radius: 12px;
  background: rgba(33, 33, 33, 0.41);
  overflow: hidden;
  box-shadow: 0px 0px 10.2px 1px rgba(179, 159, 159, 0.13) inset;
  background: linear-gradient(
    112.04deg,
    rgba(67, 213, 199, 0.12) 1.24%,
    rgba(0, 0, 0, 0) 64.01%
  );
  border: 1px solid;
  border-image-source: linear-gradient(
    130.78deg,
    rgba(0, 0, 0, 0.1) 55.65%,
    rgba(67, 213, 199, 0.2) 94.34%
  );
}
.operation-box {
  height: 100%;
  display: flex;
  .left {
    width: 426px;
    height: 100%;
    .operation-info {
      // height: 265px;
      height: calc(100% - 400px);
      @include bg();
      margin-bottom: 20px;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-bottom: 0;
      color: #fff;
      font-weight: 700;
      font-size: 16px;

      .operation-content {
        height: calc(100% - 36px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 18px 0;
        .pat-info {
          span {
            &:first-of-type {
              font-size: 24px;
            }
            &:not(:last-child) {
              margin-right: 20px;
            }
          }
        }
        .avtar {
          width: 52px;
          height: 52px;
          border-radius: 50%;
          margin-right: 20px;
          object-fit: contain;
        }
        div {
          display: flex;
          align-items: center;
        }
        .operation,
        .anaesthesia {
          span:first-of-type {
            font-weight: 400;
            margin-right: 24px;
          }
        }
      }
    }
    .human-monitoring {
      height: calc(100% - 380px - 0px);
      // height: 440px;
      @include bg();
      // padding: 20px;
      padding-bottom: 0;
      // overflow: hidden;
    }
  }
  .center {
    margin: 0 10px;
    width: calc(100% - 426px - 426px - 0px);
    position: relative;
    height: 100%;
    .time-axis {
      display: flex;
      align-items: center;
      p {
        font-weight: 700;
        font-size: 36px;
        color: #fff;
        margin-right: 27px;
      }
      .step {
        width: calc(100% - 95px);
      }
    }

      .pattag {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .patname {
    }
    .patage {
    }
    .patsex {
    }
  }
  }


  .container {
    margin: 0 10px;
    width: calc(100% - 426px - 426px - 0px);
    height: 100%;
    display: flex;
    justify-content: space-between;
    .left {
      width: 48%;

      .axial {
        border: 1px solid #000;
        height: 100%;
        overflow: hidden;
        border: 1px solid #fff;
      }
    }
    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 48%;
      .sagittal {
        overflow: hidden;
        height: 48%;
        border: 1px solid #ffff;
      }
      .coronal {
        height: 48%;
        border: 1px solid #fff;
        overflow: hidden;
      }
    }
  }

  .right {
    height: 100%;
    width: 426px;
    .operate {
      @include bg();
      // height: calc(100% - 414px - 20px);
      padding: 15px;
      height: 38%;
      margin-bottom: 15px;
      ul {
        display: grid;
        grid-template-columns: repeat(6, 1fr); /* 默认每行 2 个元素 */

        li {
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
          margin: 10px;
          div {
            width: 47px;
            height: 47px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(
              319.35deg,
              #262424 15.44%,
              #000000 84.72%
            );
            margin-bottom: 5px;
            font-size: 14px;
            color: rgba(197, 197, 197, 1);
          }
        }
        .active {
          div {
            background: linear-gradient(
              319.35deg,
              rgba(61, 167, 141, 0.1) 15.44%,
              #39d0ac 84.72%
            );
          }
          .svg-icon {
            fill: #fff;
          }
        }
      }
      .control-box {
        display: flex;
        justify-content: center;
        img {
          width: 202px;
          height: 202px;
          object-fit: contain;
          // margin: 0 17px;
          margin-top: -25px;
        }
        .icons {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
        .icon {
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(
            319.35deg,
            #262424 15.44%,
            #000000 84.72%
          );
          width: 67px;
          height: 67px;
          border-radius: 50%;
          .svg-icon {
            fill: rgba(158, 158, 158, 0.6);
          }
        }
        .active {
          background: linear-gradient(
            319.35deg,
            rgba(61, 167, 141, 0.1) 15.44%,
            #39d0ac 84.72%
          );
          .svg-icon {
            fill: #fff;
          }
        }
      }
    }
    .xiaolan {
      @include bg();
      padding: 10px;
      height: 38%;
    }
    .output {
      height: 23.5%;
      @include bg();
      // margin: 20px 0;
      margin-bottom: 15px;
      .submit {
        float: right;
        width: 100px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #275d59;
        margin-top: 10px;
        border-radius: 10px;
      }
    }
    .setting {
      height: 141px;
      @include bg();
    }
  }
}
:deep(.el-textarea__inner) {
  background: #141e1f;
}
</style>
